<template>
  <div class="newPatentDetails-container-padding">
    <div class="buttonList">
      <div class="left">
        <el-descriptions :column="4">
          <template #title>
            <div class="item">
              <div class="tag">在用</div>
              <div class="text">【0349348】这是一行企业标准名称替代文字</div>
            </div>
          </template>
          <el-descriptions-item label="标注类别：">
            XXXXXXXXXXXXXX
          </el-descriptions-item>
          <el-descriptions-item label="归口专业：">
            XXXXXXXXXXXXXXXXXXXXX
          </el-descriptions-item>
          <el-descriptions-item label="发布日期：">
            2024/04/23
          </el-descriptions-item>
          <el-descriptions-item label="最近修改日期：">
            2024/04/30
          </el-descriptions-item>
          <el-descriptions-item label="备注：">
            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX！
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <el-button type="primary">企业标准废止</el-button>
    </div>
    <el-tabs v-model="activeName" class="margin-top20" @tab-click="tabClick">
      <el-tab-pane
        v-for="(item, index) in tabList"
        :key="index"
        :label="item.label"
        :name="item.name"
      />
      <Tab1 v-if="activeName === 1" />
      <Tab2 v-if="activeName === 2" />
      <Tab3 v-if="activeName === 3" />
      <Tab4 v-if="activeName === 4" />
      <Tab5 v-if="activeName === 5" />
      <Tab6 v-if="activeName === 6" />
      <Tab7 v-if="activeName === 7" />
    </el-tabs>

    <!-- <el-divider /> -->
    <!-- <div class="title">操作日志</div>
    <vxe-grid v-bind="operationLog" :height="height">
      <template #pager>
        <vxe-pager
          v-model:current-page="tablePage.currentPage"
          v-model:page-size="tablePage.pageSize"
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          :total="tablePage.total"
          @page-change="handlePageChange"
        />
      </template>
    </vxe-grid> -->
  </div>
</template>

<script setup lang="ts">
  import { operationLog, descriptions, descriptions2 } from '../table/column'
  import { reactive, ref } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import { Plus } from '@element-plus/icons-vue'
  import Tab1 from './tab1.vue'
  import Tab2 from './tab2.vue'
  import Tab3 from './tab3.vue'
  import Tab4 from './tab4.vue'
  import Tab5 from './tab5.vue'
  import Tab6 from './tab6.vue'
  import Tab7 from './tab7.vue'

  const activeName = ref(1)
  const tabClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab.props.name)
  }

  const tabList = ref([
    {
      label: '企业标准内容',
      name: 1,
    },
    {
      label: '企业标准制修订',
      name: 2,
    },
    {
      label: '企业标准复审',
      name: 3,
    },
    {
      label: '企业标准修改单',
      name: 4,
    },
    {
      label: '相关审核',
      name: 5,
    },
    {
      label: '相关会议',
      name: 6,
    },
    {
      label: '相关文档',
      name: 7,
    },
  ])

  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  })

  const handlePageChange: VxePagerEvents.PageChange = ({
    currentPage,
    pageSize,
  }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
    // findList()
  }

  const height = ref(0)
  const $baseTableHeight = inject('$baseTableHeight')
  onBeforeMount(() => {
    window.addEventListener('resize', handleHeight)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleHeight)
  })

  const handleHeight = () => {
    height.value = $baseTableHeight(0)
  }
</script>

<style scoped lang="scss">
  $margin-bottom: 20px;
  .margin-top20 {
    margin-top: $margin-bottom;
  }
  .buttonList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: $margin-bottom;
    border-bottom: 1px solid #edeff2;
    margin-bottom: $margin-bottom;
    .item {
      display: flex;
      align-items: center;
      .tag {
        width: 36px;
        height: 18px;
        background: #52c41a;
        border-radius: 2px;
        font-weight: 400;
        font-size: 12px;
        color: #ffffffe0;
        padding: 1px 6px;
        box-sizing: border-box;
      }
      .text {
        font-weight: 500;
        font-size: 18px;
        color: #000000e0;
      }
    }
  }
  .title {
    border-radius: 2px;
    border-left: 5px solid #1890ff;
    height: 28px;
    background: #f7f8f9;
    font-weight: 500;
    font-size: 14px;
    color: #606266;
    padding-left: 12px;
    line-height: 28px;
    // margin-bottom: $margin-bottom;
  }
  .form-inline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
    :deep(.el-form-item) {
      margin-right: 0;
    }
  }
  .inventor {
    p {
      text-align: left;
    }
    text-align: center;
  }

  :deep(.table-title) {
    background: #a0cfff !important;
    color: #000 !important;
  }
  :deep(.el-descriptions__title) {
    padding-left: 0 !important;
    border-left: 0 !important;
  }
</style>
